<template>
  <div class="wrapper">
    <todo-input></todo-input>
    <todo-list :todoList="todoList"></todo-list>
  </div>
</template>
<script lang='ts'>
import { defineComponent, ref, onMounted, computed } from 'vue'
import { useStore, Store } from 'vuex'
import { useTodo, IUseTodo } from './hooks'
import TodoList from './todo-list/index.vue'
import TodoInput from './todo-input/index.vue'
export default defineComponent({
  name: 'App',
  components: { TodoList, TodoInput },
  emits: [],
  mounted() {},
  setup(props, { attrs, slots, emit }) {
    const { setTodoList }: IUseTodo = useTodo()
    const store: Store<any> = useStore()
    onMounted(() => {
      setTodoList()
    })
    return {
      todoList: computed(() => store.state.list),
    }
  },
})
</script>
<style scoped lang='scss'>
</style>